<template>
  <div class="user-content default-radius">
    <div class="header">
      <h3 class="title">用户列表</h3>
      <el-button type="primary" @click="handleCreateUser">新建用户</el-button>
    </div>
    <div class="table">
      <el-table :data="stateUserList" :border="true" style="width: 100%">
        <el-table-column align="center" type="selection" label="选择" />
        <el-table-column align="center" type="index" label="序号" width="80" />
        <el-table-column align="center" prop="name" label="用户名" width="180" />
        <el-table-column align="center" prop="realname" label="真实姓名" width="180" />
        <el-table-column align="center" prop="cellphone" label="手机号码" width="180" />
        <el-table-column align="center" prop="enable" label="状态" width="120">
          <template #default="scope">
            <el-button :type="scope.row.enable ? 'success' : 'danger'" plain size="small">
              {{ scope.row.enable ? '启用' : '禁用' }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createAt" label="创建时间">
          <template #default="scope">
            {{ utcFormat(scope.row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateAt" label="更新时间">
          <template #default="scope">
            {{ utcFormat(scope.row.updateAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              icon="EditPen"
              link
              @click="handleEditUser(scope.row)"
            >
              编辑
            </el-button>
            <el-popconfirm
              confirm-button-text="删除"
              confirm-button-type="danger"
              cancel-button-text="取消"
              icon="InfoFilled"
              icon-color="#f56c6c"
              title="您确定要删除吗？"
              @confirm="handleDeleteUser(scope.row.id)"
            >
              <template #reference>
                <el-button type="danger" size="small" icon="Delete" link> 删除 </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="stateTotalCount ? Number(stateTotalCount) : 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSystemStore } from '@/store/mian/system';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { utcFormat } from '@/utils/format-util';
const systemStore = useSystemStore();
// const usersList = computed(() => {
//   return systemStore.stateUserList;
// });
const { stateUserList, stateTotalCount } = storeToRefs(systemStore);

const currentPage = ref(1);
const pageSize = ref(10);

fetchUserListData();

function handleSizeChange() {
  fetchUserListData();
}
function handleCurrentChange() {
  fetchUserListData();
}

function fetchUserListData(searchData: any = {}) {
  const size = pageSize.value;
  const offset = (currentPage.value - 1) * size;
  const queryInfo = { ...searchData, offset, size };
  systemStore.actionPostUserList(queryInfo);
}
const emits = defineEmits(['createUserClick', 'editUserClick']);

function handleEditUser(itemData: any) {
  emits('editUserClick', itemData);
}
function handleDeleteUser(id: number) {
  systemStore.actionDeleteUserById(id);
  currentPage.value = 1;
  console.log('delete', id);
  fetchUserListData();
}
function handleCreateUser() {
  emits('createUserClick');
}

defineExpose({
  fetchUserListData
});
</script>

<style scoped lang="scss">
.user-content {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 40px;

  .header {
    display: flex;
    height: 45px;
    padding: 0 5px;
    justify-content: space-between;
    align-items: center;

    .title {
      font-size: 20px;
      font-weight: 700;
    }

    .handler {
      align-items: center;
    }
  }

  .table {
    :deep(.el-table__cell) {
      padding: 14px 0;
    }
  }

  .footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    padding-right: 20px;
  }
}
</style>
